<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 1.引入 ECharts 文件 -->
  <script src="./echarts/echarts.min.js"></script>
</head>

<body>
  <!-- 2.为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="width: 1400px;height:300px;"></div>
  <script type="text/javascript">

    // 3.1 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.getElementById('main'));

    // 3.2 指定图表的配置项和数据
    let option = {
      // 左上角标题
      title: {
        text: '成绩 Score'
      },
      // 鼠标移入样式
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      // 上方提示
      legend: {
        data: ['平均分', '低于60分人数', '60到80分之间', '高于80分人数']
      },
      // x轴
      xAxis: [
        {
          type: 'category',
          axisTick: {
            show: true
          },
          data: ['1', '2', '3', '4', '5', '6', '7', '8']
        },
      ],
      // y轴
      yAxis: [
        // 左边y轴
        {
          type: 'value',
          min: 0,
          max: 100,
          interval: 10,
          // y轴单位
          axisLabel: {
            formatter: '{value}分'
          },
          // 刻度点
          axisTick: {
            show: true
          },
          // 刻度线
          axisLine: {
            show: true
          }
        },
        {
          type: 'value',
          min: 0,
          max: 10,
          interval: 1,
          // y轴单位
          axisLabel: {
            formatter: '{value}人'
          },
          // 刻度点
          axisTick: {
            show: true
          },
          // 刻度线
          axisLine: {
            show: true
          }
        }
      ],
      series: [
        {
          // name要与legend中的值对应
          name: '平均分',
          type: 'bar',
          barWidth: '10%',
          // 柱子之间间隔
          barGap: 0.2,
          // stack: 相同的stack柱子会堆叠在一起
          // stack: '1',
          // 鼠标移入扣一个柱子 其他柱子会变淡
          emphasis: {
            focus: 'series'
          },
          data: [32, 33, 30, 33, 39, 70, 80, 80]
        },
        {
          name: '低于60分人数',
          type: 'bar',
          barWidth: '10%',
          // 值以右边y轴刻度为主
          yAxisIndex: 1,
          emphasis: {
            focus: 'series'
          },
          data: [2, 8, 9, 3, 9, 2, 3, 4]
        },
        {
          name: '60到80分之间',
          type: 'bar',
          barWidth: '10%',
          yAxisIndex: 1,
          emphasis: {
            focus: 'series'
          },
          data: [5, 3, 2, 5, 9, 3, 4, 5]
        },
        {
          name: '高于80分人数',
          type: 'bar',
          barWidth: '10%',
          yAxisIndex: 1,
          emphasis: {
            focus: 'series'
          },
          data: [9, 7, 1, 9, 4, 5, 6, 7]
        },
      ]
    }

    // 3.3使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  </script>
</body>

</html>